import React,{useState} from 'react';
import {Input,Avatar} from 'antd-mobile'
import { useNavigate } from 'react-router-dom';
import './shouye.css'

const Index = () => {
    let navigate = useNavigate()
    const [value,setValue] = useState('')
    const [dt,setdt] = useState([
        {id:1,title:"来一起早起跑步，多运动能产生多巴胺",img:"https://i0.imgs.ovh/2024/03/05/QXjdX.md.jpeg",tx:"https://i0.imgs.ovh/2024/03/05/QXjdX.md.jpeg",name:"没你的猫"},
        {id:2,title:"来一起早起跑步，多运动能产生多巴胺",img:"https://i0.imgs.ovh/2024/03/01/7jgj9.md.jpeg",tx:"https://i0.imgs.ovh/2024/03/05/QXjdX.md.jpeg",name:"没你的猫"},
        {id:3,title:"来一起早起跑步，多运动能产生多巴胺",img:"https://i0.imgs.ovh/2024/01/11/I1yuW.md.jpeg",tx:"https://i0.imgs.ovh/2024/03/05/QXjdX.md.jpeg",name:"没你的猫"},
        {id:4,title:"来一起早起跑步，多运动能产生多巴胺",img:"https://i0.imgs.ovh/2024/03/05/QXjdX.md.jpeg",tx:"https://i0.imgs.ovh/2024/03/05/QXjdX.md.jpeg",name:"没你的猫"},
        {id:5,title:"来一起早起跑步，多运动能产生多巴胺",img:"https://i0.imgs.ovh/2024/03/05/QXjdX.md.jpeg",tx:"https://i0.imgs.ovh/2024/03/05/QXjdX.md.jpeg",name:"没你的猫"},
        {id:6,title:"来一起早起跑步，多运动能产生多巴胺",img:"https://i0.imgs.ovh/2024/03/05/QXjdX.md.jpeg",tx:"https://i0.imgs.ovh/2024/03/05/QXjdX.md.jpeg",name:"没你的猫"},
        {id:7,title:"来一起早起跑步，多运动能产生多巴胺",img:"https://i0.imgs.ovh/2024/03/05/QXjdX.md.jpeg",tx:"https://i0.imgs.ovh/2024/03/05/QXjdX.md.jpeg",name:"没你的猫"},
    ])
    return <div>
        动态
        <div>
            <Input
                className='sy-inp' 
                placeholder = '请输入内容'
                onClick={()=>{navigate('/app/search')}}
                value={value}
                style={{'--font-size':'13px'}}
                onChange={val=>{
                    setValue(val)
                }}
                clearable></Input>
        </div>
        <div className='sy-tuijian'>
            <div className='sy-tj-f'>#每日#</div>
            <div className='sy-tj-f'>#每日#</div>
            <div className='sy-tj-f'>#每日#</div>
            <div className='sy-tj-f'>#每日#</div>
        </div>
        <div className='sy-pass'>
            最新动态
        </div>
        <div className='sy-last'>
            {
                dt.map((item,index)=>{
                    return (
                        <div key={item.id} className='sy-test'>
                            <div>
                            <img src={item.img} alt="" onClick={()=>{navigate('/app/detailye')}}/>
                            </div>
                            <div className='sy-tit'>
                                {item.title}
                            </div>
                            <div className='sy-sanp'>
                                <div className="sy-ca">
                                    <div className='sy-ava'>
                                    <Avatar src={item.tx} style={{"--border-radius":"25px",'--size':'21px'}}/>
                                    </div>
                                    <div className='sy-name'>{item.name}</div>
                                </div>
                                <div className='sy-dian'>
                                    1.9w
                                </div>
                            </div>
                        </div>
                    )
                })
            }
            {/* <div className='sy-test'>
                <div>
                    <img src="https://i0.imgs.ovh/2024/03/05/QXjdX.md.jpeg" alt="" />
                </div>
                <div>
                    title
                </div>
                <div className='sy-sanp'>
                    <div className='sy-ca'>
                        <div>
                            <Avatar src="https://i0.imgs.ovh/2024/03/05/QXjdX.md.jpeg" style={{"--border-radius":"25px",'--size':'21px'}}/>
                        </div>
                        <div>
                            没你的猫
                        </div>
                    </div>
                    
                    <div>
                        1.9w
                    </div>
                </div>
            </div> */}
            
            
            
        </div>
    </div>;
}



export default Index;